<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2> {{i18n('slipping-away-users.title')}} </h2>
            <cly-tooltip-icon :tooltip="i18n('slipping-away-users.description')" icon="ion ion-help-circled" style="margin-left:8px" placement="bottom-end"> </cly-tooltip-icon>
        </template>
    </cly-header>
    <cly-main>
        <cly-qb-bar v-if="showDrillFilter" feature="slipping_away_users" v-model="slippingAwayUsersFilters" queryStore="slipping-away-users" format="mongo" style="margin-bottom:32px" :propertySourceConfig="{'wrappedUserProperties': false}"></cly-qb-bar>
        <cly-section>
            <cly-chart-bar :option="slippingAwayUsersOptions" :height="400" v-loading="isLoading" :force-loading="isLoading"></cly-chart-bar>
        </cly-section>
        <cly-section>
            <cly-datatable-n  :rows="slippingAwayUsersRows" :resizable="true" :force-loading="isLoading">
                <template v-slot="scope">
                    <el-table-column sortable="custom"  prop="period" :label="i18n('slipping-away-users.table-period')">
                    </el-table-column>
                    <el-table-column sortable="custom"  prop="count" :label="i18n('slipping-away-users.table-count')">
                        <template slot-scope="scope">
                            {{formatNumber(scope.row.count)}}
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom"  prop="percentage" :label="i18n('slipping-away-users.table-percentage')">
                        <template slot-scope="scope">
                            <div class="bu-level-left" style="padding: 7px 28px 7px 0;">
                                <div class="bu-level-item slipping-away-users-table__data-item">
                                    <span>{{scope.row.percentage}}%</span>
                                </div>
                                <cly-progress-bar :percentage="parseInt(scope.row.percentage)" :color="progressBarColor"> </cly-progress-bar>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="timeStamp"  align="center" v-if="showViewUsers">
                        <template slot-scope="scope">
                            <div class="bu-level-right">
                                <el-link type="primary" @click="onUserListClick(scope.row.timeStamp)" :underline="false" class="slipping-away-users-table__link">{{i18n('slipping-away-users.table-user-list')}}</el-link>
                            </div>
                        </template>
                    </el-table-column>
                </template>
            </cly-datatable-n>
        </cly-section>
    </cly-main>
</div>
